Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Скрипт расширяет стандартный интерфейс вида товаров дополнительными кнопками ± для упрощения процесса указания количества товаров, который клиент желает приобрести. Стандартно присутствует возможность задавать количество приобретаемого товара лишь посредством ввода цифр в соответствующем поле. Во многих случаях это не всегда удобно, здесь же клиенту вашего магазина потребуется произвести лишь пару щелчков мышкой и уже сразу после этого перейти к покупке товара.

Решение полностью работоспособно, как в шаблоне вида товаров на страницах каталога, так и на самой странице товара. Всего присутствует три вида отображения кнопок ±. Например, перейти в отрицательное значение чрезмерным нажатием кнопки "-" невозможно, данная ситуация предусмотрена.

Основные функции кнопок:

• выводит поле для ввода количества товаров, а вместе с ним кнопки + и - в виде товаров и странице товара;
• при добавлении в корзину автоматически будет помещено указанное количество товара из каталога или его карточки;
• при изменении количества товара цена пересчитывается автоматически;
• перейти в отрицательное значение чрезмерным нажатием кнопки "-" невозможно, данная проблема предусмотрена;
• гибкая стилизация элементов. Изначально присутствует три вида отображения кнопок ±

Первый шаг: загрузка скрипта на сайт

Перейдите в Панель управления » Файловый менеджер. В правом верхнем углу клините на кнопку "Создать папку", введите название папки js. После создания папки, зайдите в неё. Загрузите в эту папку файл "plus-minus-item.js" из архива со скриптом.

Второй шаг: размещение кода

Перейдите в Панель управления » Управление дизайном » Интернет-магазин: Вид товара в каталоге, затем в то место, где желаете видеть кнопку переключения разместите следующий код:

<div style="display:inline-block;">Количество: 
    <div class="value-numb">
	<a href="javascript://" class="tic-tac plus" data-incval="1">+</a><input type="text" id="q$BLOCK_PREF$-$ID$-basket" value="1" min="1" step="1" class="form-control" size="3" onfocus="this.select()" onkeypress="return checkNumber(this, event, '1');"><a href="javascript://" class="tic-tac minus" data-incval="-1">-</a>
    </div>
</div>

Теперь перейдите в Панель управления » Управление дизайном » Интернет-магазин: Страница товара и опять где желаете видеть кнопку переключения, разместите код:

<div style="display:inline-block;">Количество: 
    <div class="value-numb">
	<a href="javascript://" class="tic-tac plus" data-incval="1">+</a><input type="text" id="qid-$ID$-basket" value="1" min="1" step="1" class="form-control" size="3" onfocus="this.select()" onkeypress="return checkNumber(this, event, '1');"><a href="javascript://" class="tic-tac minus" data-incval="-1">-</a>
    </div>
</div>

Далее перейдите в Панель управления » Управление дизайном » Интернет-магазин и в шаблоны "Главная страница магазина", "Каталог товаров" и "Страница товара" перед тегами </body></html> разместите код:

<script type="text/javascript" src="/js/plus-minus-item.js"></script>

и сохраните изменения.

Третий шаг: стилизация кнопок

В том случае, если вы желаете установить первый вариант стиля кнопок: перейдите в Панель управления » Управление дизайном » Интернет-магазин: Таблица стилей, и в самый конец шаблона разместите код:

.value-numb{
    overflow: hidden;
    position: relative;
    width: 64px;
    border: 1px solid #ccc;
    z-index:5553;
}
.value-numb .minus, .value-numb .plus{
    position: absolute;
    bottom: 0;
    background: #fff;
    color: #777;
    border: none;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    width: 19px;
    box-sizing: border-box;
    -moz-box-sizing: border-box; 
    text-decoration: none;
}
.value-numb .plus{
    padding: 7px 0 10px 4px;
    line-height: 27px;
    font-size: 12px;
    right: 0;
    z-index:5554;
}
.value-numb .minus{
    padding: 0 60px 0 6px;
    line-height: 13.5px;
    font-size: 13px;
    left: 45px;
    z-index:5555;
}
.plus:hover, .minus:hover{
    background: #888;
    color:#fff;
}
.form-control {
    width: 100%;
    padding: 6px 0 6px 10px;
    font-size: 16px;
    background: #fff!important;
    box-shadow: none!important;
    border: none!important;
}

и сохраните изменения.

Если вы желаете установить второй вариант стиля кнопок: перейдите в Панель управления » Управление дизайном » Интернет-магазин: Таблица стилей, и в самый конец разместите код:

.value-numb {
    position: relative;
    width: 44px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
.value-numb .plus, .value-numb .minus {
    background: #F7F7F7;
    padding: 0;
    line-height: 15px;
    display:block;
    text-align:center;
    color:#555;
    text-decoration: none;
}
.value-numb .plus {
    font-size: 15px;
    border-radius:5px 5px 0 0;
}
.value-numb .minus {
    font-size: 17px;
    border-radius:0 0 5px 5px;
}
.plus:hover, .minus:hover {
    background: #ddd;
    color:#000;
}
.form-control {
    width: 100%;
    text-align:center;
    font-size: 15px!important;
    background: #fff!important;
    box-shadow: none!important;
    border: none!important;
    padding: 5px 0 5px 0!important;
}

Если вы желаете установить третий вариант стиля кнопок: перейдите в Панель управления » Управление дизайном » Интернет-магазин: Таблица стилей, и в самый конец разместите код:

.value-numb {
    position: relative;
    width: 84px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
.value-numb .plus, .value-numb .minus {
    background: #F7F7F7;
    padding: 4px;
    display:inline-block;
    color:#555;
    text-decoration: none;
    height:20px;
}
.value-numb .plus {
    font-size: 15px;
    border-radius:5px 0 0 5px;
}
.value-numb .minus {
    font-size: 15px;
    border-radius:0 5px 5px 0;
}
.plus:hover, .minus:hover {
    background: #ddd;
    color:#000;
}
.form-control {
    width:auto;
    text-align:center;
    font-size: 15px!important;
    background: #fff!important;
    box-shadow: none!important;
    border: none!important;
    padding: 5px 0 4px 0!important;
}

Информация о классах:

• value-numb – обводка
• plus – кнопка "плюс"
• minus – кнопка "минус"
• form-control – поле кол-ва товаров